---
title: Tailwind CSS Collapse - Components Library @David UI
description: Showcase collapsible sections with Tailwind CSS Collapse components. They are fully customizable for streamlined content organization and user-friendly designs.
github: collapse
---

<ScriptLoader />

<InfoBadge />

# Tailwind CSS Collapse 

David UI's Collapse component provides an elegant solution for organizing content in expandable sections. Styled with Tailwind CSS, it supports smooth transitions, icons, and fully customizable designs.

Explore our responsive Collapse component examples, styled with Tailwind CSS, which are perfect for enhancing usability in your web or mobile projects.


---

## Basic Collapse

This component is ideal for building features like accordions, mobile menus, file trees, and more. Copy and paste the code below directly into your project.

<PreviewWithCode relativePath="collapse/collapse-demo.tsx" language="html" />

--- 

## Collapse List

Check out this example to discover how to design a responsive collapse component tailored for various use cases.

<PreviewWithCode relativePath="collapse/collapse-list.tsx" language="html" />

---

## Required Script

The Collapse component in david-ai requires JavaScript to handle the expand/collapse functionality. The library provides smooth transitions and toggle behavior through data attributes.

### Installation

To use the Collapse component in your project, you first need to install the `david-ai` library via npm:

<CodePreviewTailwindClasses codeSnippet={`npm install david-ai`}/>

### Basic Usage

<CodePreviewTailwindClasses codeSnippet={
`import { initCollapse } from 'david-ai';

// Initialize collapse functionality
initCollapse();
`
}/>

### Using with Global Access
If you prefer, you can use the DavidAI global object instead of directly importing initCollapse:

<CodePreviewTailwindClasses codeSnippet={
`import * as DavidAI from 'david-ai';

// Initialize collapse functionality
DavidAI.initCollapse();
`
}/>

### Using with CDN
You can include david-ai via a CDN and initialize collapse functionality globally in the browser. Add the following script to your HTML file:

<CodePreviewTailwindClasses codeSnippet={`<script src="https://cdn.jsdelivr.net/gh/creativetimofficial/david-ai@1.0.4/packages/dist/david-ai.min.js" defer></script>`}/>

### HTML Code Example

<CodePreviewTailwindClasses codeSnippet={
`<div data-dui-toggle="collapse" 
     data-dui-target="#collapseExample" 
     aria-expanded="false" 
     aria-controls="collapseExample"
     class="cursor-pointer">
  Toggle Collapse
</div>
<div class="overflow-hidden transition-[max-height] duration-300 ease-in-out max-h-0" 
     id="collapseExample">
  <div class="p-4">
    Collapse content goes here
  </div>
</div>`
}/>
